<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" class="upload">
    <img src="" alt="" class="mimg">
</body>
</html>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document.querySelector('.upload').addEventListener('change',function(event){
        let fd=new FormData();
        fd.append('img',event.target.files[0])
        var xhr=new XMLHttpRequest;
        xhr.open('post','https://hmajax.itheima.net/api/uploadimg')
        xhr.upload.onprogress=function(ev){
            var percent=(ev.loaded/ev.total)*100+'%'
        }
        xhr.send(fd)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                let res=JSON.parse(xhr.response)
                document.querySelector('.mimg').src=res.data.url
            }
        }
    })
</script>